<template>
  <div>
    <el-dialog title="课程信息" width="40%" direction="rtl" :wrapper-closable="false" :visible="visible" :before-close="handlerClose" :close-on-click-modal="false">
      <el-row type="flex" align="middle" class="title-item file-preview">
        <div class="picture">
          <el-image :src="response.cover_url">
            <el-row slot="error" type="flex" align="middle" justify="center" class="image-slot"><i class="el-icon-picture-outline" /></el-row>
          </el-image>
        </div>
        <el-row type="flex" justify="space-between" class="info">
          <el-tooltip effect="dark" :content="response.title" placement="bottom-start">
            <div class="name">{{ response.title }}</div>
          </el-tooltip>
          <el-row type="flex">
            <div>有效期至：{{ response.end_time }}</div>
          </el-row>
        </el-row>
      </el-row>
      <el-form ref="elForm" :model="elForm" :rules="rules" size="small" label-width="92px">
        <el-form-item label="平台分类">
          <span>{{ response.cates }}</span>
        </el-form-item>
        <el-form-item label="设置分类" prop="cate">
          <el-cascader v-model="elForm.cate" :options="options" clearable size="small" />
        </el-form-item>
        <el-form-item label="平台售价">
          <span>￥{{ response.cost_price }}</span>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="elForm.price" placeholder="输入销售价格" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="choose-footer">
        <el-button size="small" @click="$emit('update:visible', false)">取消</el-button>
        <el-button type="primary" size="small" @click="setVideoPrice">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    course: {
      type: Object,
      required: true
    }
  },
  inject: ['reload'],
  data() {
    return {
      confirmLoading: false,
      loading: false,
      response: [],
      elForm: {
        vid: this.course.vid,
        cate: undefined,
        price: undefined
      },
      options: [],
      rules: {
        cate: [
          {
            required: true,
            message: '请设置分类',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$http.post(
          '/course/admin/agent/courseinfo',
          {
            vid: this.course.vid,
            type: this.course.type,
            aid: this.course.aid
          },
          response => {
            this.response = response.data;
            this.options = response.data.mhmCates;
            this.elForm.price = response.data.price;
            this.elForm.cate = response.data.cate;
          },
          _ => {
          }
      );
    },
    handlerClose() {
      this.$emit('update:visible', false);
      this.$refs['elForm'].resetFields();
    },
    // 提交数据
    setVideoPrice: function () {
      this.$refs['elForm'].validate((valid) => {
        console.log(this.elForm);
        if (valid) {
          this.xUri = '/course/admin/agent/update';
          this.confirmLoading = true;
          this.$http.post(
              this.xUri,
              {
                ...this.elForm,
                vid: this.course.vid,
                aid: this.course.aid
              },
              ({ msg }) => {
                this.$message.success(msg);
                this.confirmLoading = false;
                this.handlerClose();
                this.$emit('reload');
                this.reload();
              },
              ({ msg }) => {
                this.$message.error(msg);
                this.confirmLoading = false;
              }
          );
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.title-item {
  width: max-content;
  margin-left: 25px;
  margin-bottom: 20px;
  .picture {
    margin-right: 10px;
    padding-top: 60px;
    width: 80px;
    height: 0;
    position: relative;
    .el-image {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      ::v-deep.image-slot {
        height: 100%;
        font-size: 20px;
        color: #909399;
        background: #f5f7fa;
      }
    }
  }
  .info {
    flex: 1;
    flex-direction: column;
    height: 55px;
    .name {
      width: 182px;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.el-select,.el-input {
  width: 280px;
}
</style>
